﻿<%@ Page Language="C#" Title="Create a New Event!" MasterPageFile="~/EventsParent.Master" AutoEventWireup="true" CodeBehind="CreateEvent.aspx.cs" Inherits="WebFrontEnd.CreateEvent" %>


<asp:Content ID="NavBarContent" ContentPlaceHolderID="NavBar" runat="server">
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="css/jquery.timeentry.css" />
    <script src="js/jquery.timeentry.min.js"></script>
    <link href="css/select2.css" rel="stylesheet" />
    <script type="text/javascript" src="js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#<% Response.Write(DateOfEventInput.ClientID); %>").datepicker({
                dateFormat: "dd/mm/yy",
                showButtonPanel: true,
                changeYear: true,
            });
            $("#<% Response.Write(TimeOfEventInput.ClientID); %>").timeEntry({
                show24Hours: true,
                useMouseWheel: false,
                defaultTime: '19:30'
            }).text('19:30');
            $("#<% Response.Write(HallInput.ClientID); %>").select2();

            $("#hallRequestButton").click(function () {
                var hallName = $("#hallNameInput").val();
                $.ajax({
                    type: "POST",
                    url: "CreateEvent.aspx/SendHallRequest",
                    data: JSON.stringify({ 'hallName': hallName }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        console.log('here');
                        $("#hallRequestAjaxLoader").hide();
                        if (response.d == "SUCCESS") {
                            $("#hallRequestStatusText").html("Thanks! You're making YEMS that much better!");
                            $("#hallRequestStatusAlert").removeClass('alert-error').addClass('alert-success');
                            $("#hallRequestStatusAlert").show();
                        } else {
                            $("#hallRequestStatusText").html("Our server's having some issues...");
                            $("#hallRequestStatusAlert").removeClass('alert-success').addClass('alert-error');
                            $("#hallRequestStatusAlert").show();
                        }
                    },
                    error: function () {
                        $("#hallRequestAjaxLoader").hide();
                        $("#hallRequestStatusText").html("Uh-oh, the server's having some issues...");
                        $("#hallRequestStatusAlert").removeClass('alert-success').addClass('alert-error');
                        $("#hallRequestStatusAlert").show();
                    }

                });
                $("#hallRequestAjaxLoader").show();
                return false;
            });
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="page-header">
        <h1>Create a New Event!</h1>
    </div>
    <div class="row">
        <div class="span8 offset2 well">
            <div class="row-fluid">
                <div class="span6">
                    <div runat="server" id="createerroralert" style="display:none;" class="alert alert-error">
                        <a class="close" data-dismiss="alert">×</a>
                        <span runat="server" id="createAlertText"></span>
                    </div>
                        <asp:ValidationSummary ID="ValidationSummary2" CssClass="alert alert-error" ValidationGroup="eventGroup" runat="server" HeaderText="<a class='close' data-dismiss='alert'>×</a>There were some errors..."/>
                    <label for="<% Response.Write(EventTypeDropDownList.ClientID);%>">Choose the type of event.</label>
                    <asp:DropDownList ID="EventTypeDropDownList" AutoPostBack="true" runat="server" OnSelectedIndexChanged="EventTypeDropDownList_SelectedIndexChanged"></asp:DropDownList>
                    <asp:Label ID="NameLabel" AssociatedControlID="NameInput" runat="server" Text="Please enter the name of the event" />
                    <asp:TextBox ID="NameInput" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="NameInput"
                                ErrorMessage="Title name is required." CssClass="yorkin-error" ValidationGroup="eventGroup">*</asp:RequiredFieldValidator>
                    <asp:Label ID="MaleActorLabel" AssociatedControlID="MaleActorInput" runat="server" Text="Groom's Name" />
                    <asp:TextBox ID="MaleActorInput" BackColor="LightBlue" runat="server" />
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="MaleActorInput"
                                ErrorMessage="Name is required." CssClass="yorkin-error" ValidationGroup="eventGroup">*</asp:RequiredFieldValidator>
                    <asp:Label ID="FemaleActorLabel" AssociatedControlID="FemaleActorInput" runat="server" Text="Bride's Name" />
                    <asp:TextBox ID="FemaleActorInput" BackColor="LightPink" runat="server" Text="" />
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="FemaleActorInput"
                                ErrorMessage="Name is required." CssClass="yorkin-error" ValidationGroup="eventGroup">*</asp:RequiredFieldValidator>
                    <asp:Label ID="DateOfEventLabel" AssociatedControlID="DateOfEventInput" runat="server" Text="Enter the date of the event" />
                    <asp:TextBox ID="DateOfEventInput" runat="server" placeholder="Click to set Date" />
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="DateOfEventInput"
                                ErrorMessage="Date of the event is required." CssClass="yorkin-error" ValidationGroup="eventGroup">*</asp:RequiredFieldValidator>
                    <asp:Label ID="TimeOfEventLabel" AssociatedControlID="TimeOfEventInput" runat="server" Text="Enter the time of the event" />
                    <asp:TextBox ID="TimeOfEventInput" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TimeOfEventInput"
                                ErrorMessage="Time of the event is required." CssClass="yorkin-error" ValidationGroup="eventGroup">*</asp:RequiredFieldValidator>
                </div>
                <div class="span6">
                    <asp:Label AssociatedControlID="HallInput" ID="HallLabel" runat="server" Text="Choose a hall from the list" />
                    <asp:DropDownList ID="HallInput" CssClass="span12" runat="server" />
                    <a href="#hallRequestModal" role="button" data-toggle="modal">Don't see your hall? Click here...</a>
                    <div style="margin-top: 30px;">
                        <asp:Button OnClick="CreateButton_Click" Style="" Text="Create Event" CssClass="btn btn-primary btn-large btn-block    " runat="server" ID="CreateButton" ValidationGroup="eventGroup" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="hallRequestModal" class="modal hide fade" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Request a Hall</h3>
        </div>
        <div class="modal-body">
            <p>
                We're populating our list of halls as fast as we can, but if you didn't see
                your hall, you can send us the hall name and we'll add it to our growing list
                as fast as we can!
            </p>
            <p>
                For now you can choose 'Unspecified Hall' from the list.
            </p>
            <label>Enter the name of the hall</label>
            <input type="text" id="hallNameInput" class="input-xlarge" />               
            <span id="hallRequestAjaxLoader" style="display:none;"><img src="img/ajax-loader.gif" alt="loader" /></span>        
            <div id="hallRequestStatusAlert" style="display:none;" class="alert alert-success">
                <a class="close" data-dismiss="alert">×</a>
                <span id="hallRequestStatusText"></span>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" id="hallRequestButton" aria-hidden="true">Send a hall request</button>
        </div>
    </div>
</asp:Content>
